<template>
  <div>
    <el-button size="medium" plain type="primary" @click="add()"
      >新增菜单</el-button
    >

    <!-- 数据表 -->
    <el-table
      :data="tableData"
      v-loading="loading"
      style="width: 100%"
      row-key="id"
      stripe
      fit
      size="small"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="菜单"> </el-table-column>
      <el-table-column prop="type" label="类型">
        <template slot-scope="scope">
          <el-tag size="small" v-if="scope.row.type === 1">目录</el-tag>
          <el-tag size="small" v-else-if="scope.row.type === 2" type="success"
            >菜单</el-tag
          >
          <el-tag size="small" v-else-if="scope.row.type === 3" type="info"
            >按钮</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="path" label="路由地址"> </el-table-column>
      <el-table-column prop="component" label="组件路径"> </el-table-column>
      <el-table-column prop="hidden" label="是否隐藏">
        <template slot-scope="scope">
          <el-tag size="small" v-if="scope.row.hidden === 1">隐藏</el-tag>
          <el-tag size="small" v-else-if="scope.row.hidden === 2" type="success"
            >显示</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="addSonNode(scope.row)"
            >新增下级菜单</el-button
          >
          <el-divider direction="vertical"></el-divider>
          <el-button size="small" type="text" @click="update(scope.row)"
            >编辑</el-button
          >
          <el-divider direction="vertical"></el-divider>
          <el-button size="small" type="text" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增和编辑对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="50%"
      :show-close="false"
    >
      <el-form
        :model="menuForm"
        :rules="rules"
        ref="menuForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="parentId" label="上级菜单">
          <treeselect
            :disabled="disabled"
            v-model="menuForm.parentId"
            :options="menuOptions"
            :normalizer="normalizer"
            :show-count="true"
            placeholder="选择上级菜单"
          />
        </el-form-item>

        <el-form-item prop="name" label="菜单名">
          <el-input
            type="text"
            v-model="menuForm.name"
            auto-complete="off"
            placeholder="请输入菜单名"
          ></el-input>
        </el-form-item>

        <el-form-item label="菜单类型" prop="type">
          <el-select v-model="menuForm.type" placeholder="请选择菜单类型">
            <el-option label="目录" :value="1"></el-option>
            <el-option label="菜单" :value="2"></el-option>
            <el-option label="按钮" :value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="icon" label="图标" v-if="menuForm.type != 3">
          <el-select v-model="menuForm.icon">
            <el-option
              v-for="item in elementIcons"
              :key="item"
              :label="item"
              :value="item"
            >
              <div class="select-icons">
                <i :class="item"></i>
                <span style="margin-left: 5px">{{ item }}</span>
              </div>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="path" label="路由地址" v-if="menuForm.type == 2">
          <el-input
            type="text"
            v-model="menuForm.path"
            auto-complete="off"
            placeholder="请输入路由地址"
          ></el-input>
        </el-form-item>

        <el-form-item
          prop="component"
          label="组件路径"
          v-if="menuForm.type == 2"
        >
          <el-input
            type="text"
            v-model="menuForm.component"
            auto-complete="off"
            placeholder="请输入组件位置"
          ></el-input>
        </el-form-item>

        <el-form-item prop="api" label="数据访问接口" v-if="menuForm.type != 1">
          <el-input
            type="text"
            v-model="menuForm.api"
            auto-complete="off"
            placeholder="请输入数据访问接口"
          ></el-input>
        </el-form-item>

        <el-form-item
          prop="hidden"
          label="是否隐藏页面"
          v-if="menuForm.type != 3"
        >
          <el-switch
            v-model="menuForm.hidden"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitBtn('menuForm')" v-debounce>
			确 定
		</el-button>
        <el-button @click="cancleBtn()">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import elementIcons from "../../utils/element-icons";

export default {
  name: "Menu",
  components: { Treeselect },
  data() {
    return {
      elementIcons,
      loading: false,
      disabled: false,
      tableData: [],
      dialogVisible: false,
      dialogTitle: "",
      rules: {
        type: [
          { required: true, message: "菜单类型不能为空", trigger: "blur" },
        ],
        name: [{ required: true, message: "菜单名不能为空", trigger: "blur" }],
      },
      menuForm: {
        id: undefined,
        parentId: undefined,
        hidden: 1,
        icon: undefined,
        type: 1,
        path: undefined,
        component: undefined,
        api: undefined,
      },
      // 菜单树选项
      menuOptions: [],
    };
  },
  created() {
    this.initTable();
    this.reset();
  },
  methods: {
    //新增按钮
    add() {
      this.reset();
      this.dialogVisible = true;
      this.dialogTitle = "新增菜单";
      this.disabled = false;
    },
    //新增下级菜单按钮
    addSonNode(data) {
      console.log(data.id);
      this.menuForm.parentId = data.id;
      this.dialogVisible = true;
      this.dialogTitle = "新增下级菜单";
      this.disabled = true;
    },
    //编辑按钮
    update(data) {
      this.dialogVisible = true;
      this.dialogTitle = "编辑当前菜单";
      this.menuForm.parentId = data.id;
      this.menuForm=Object.assign({}, data);
      this.disabled = true;
    },
    //删除按钮
    handleDelete(data) {
      this.$confirm("是否删除当前菜单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios.post("/sysMenu/delete", { id: data.id }).then((res) => {
          if (res.status) {
            this.initTable();
          }
        });
      });
    },

    //对话框确定按钮
    submitBtn(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("menuForm", JSON.stringify(this.menuForm));
          if (this.menuForm.id == undefined) {
            this.$axios.post("/sysMenu/insert", this.menuForm).then((res) => {
              if (res.status) {
                this.initTable();
                this.dialogVisible = false;
                this.reset();
              }
            });
          } else {
            this.$axios.post("/sysMenu/update", this.menuForm).then((res) => {
              if (res.status) {
                this.initTable();
                this.dialogVisible = false;
                this.reset();
              }
            });
          }
        }
      });
    },

    //对话框取消按钮
    cancleBtn() {
      this.dialogVisible = false;
      this.reset();
    },

    /** 转换菜单数据结构 */
    normalizer(node) {
      console.log(node);
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children,
      };
      
    },
    //重置表单
    reset() {
      this.menuForm = {
        id: undefined,
        parentId: undefined,
        title: undefined,
        icon: undefined,
        type: 1,
        path: undefined,
        hidden: 1,
        component: undefined,
        api: undefined,
      };
    },

    //初始化表数据
    initTable() {
      this.loading = true;
      this.$axios.get("/sysMenu/menuList").then((res) => {
        if (res.status) {
          console.log(res.data);
          this.menuOptions = res.data;
          this.tableData = res.data[0].children;
          this.loading = false;
        }
      });
    },
  },
};
</script>

<style scoped>
</style>